@font-face {
  font-family: myCodeFont;
  src: url('../font/SourceCodePro-Medium.ttf');
}
* {
  padding: 0 ;
  margin: 0 ;
}
html::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}
html {
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}
main.all-box {
  position: relative ;
  display: flex ;
  flex-direction: row ;
  justify-content: flex-start;
  align-items: center ;
  flex-wrap: wrap ;
  height: auto ;
  width: 100vw ;
}
main.all-box .box-head {
  position: sticky  ;
  flex: 0 auto ;
  top: 0 ;
  left: 0 ;
  width: 100% ;
  height: 50px ;
  background: white ;
  box-shadow: 0 0 10px #131824;
  z-index: 10 ;
  display: flex ;
  flex-direction: row ;
  justify-content: flex-start;
  align-items: center ;
  padding-left: 20px ;
}
main.all-box .box-head .iconfont {
  position: relative ;
  font-size: 18px ;
  font-weight: 700 ;
  text-shadow: 0 0 10px rgba(16, 31, 48, 0.5);
  margin-right: 20px ;
}
main.all-box .box-head a.back-btn {
  position: relative ;
  user-select: none ;
  font-weight: 700 ;
  font-family: "myCodeFont";
  cursor: pointer ;
  text-decoration: none ;
  color: #2d3436 ;
}
main.all-box .color-block {
  position: relative ;
  flex: 0 auto ;
  width: 20% ;
  height: 200px ;
  overflow: hidden ;
  display: flex ;
  flex-direction: column ;
  justify-content: center ;
  align-items: center ;
  z-index: 0 ;
  transition: 0.2s ;
}
main.all-box .color-block .name-box,
main.all-box .color-block .val-box {
  position: absolute ;
  display: inline-block;
  width: auto ;
  height: auto ;
  padding: 5px ;
  box-sizing: border-box;
  box-shadow: 0 0 10px rgba(99, 110, 114, 0.5);
  transition: 0.2s ;
  display: flex ;
  flex-direction: column ;
  justify-content: center ;
  align-items: center ;
  z-index: 9 ;
  user-select: none ;
}
main.all-box .color-block .name-box h2,
main.all-box .color-block .val-box h2 {
  position: relative ;
  font-size: 14px ;
  font-weight: 700 ;
  letter-spacing: 1.3px ;
  font-family: "myCodeFont";
}
main.all-box .color-block .name-box:hover,
main.all-box .color-block .val-box:hover {
  padding: 10px ;
}
main.all-box .color-block .name-box {
  top: 0px ;
  right: 0px ;
  border-bottom-left-radius: 5px ;
  background-color: white ;
}
main.all-box .color-block .name-box h2 {
  color: #636e72 ;
}
main.all-box .color-block .val-box {
  bottom: 0px ;
  right: 0px ;
  border-top-left-radius: 5px ;
  background-color: black ;
}
main.all-box .color-block .val-box h2 {
  font-size: 12px ;
  color: #f1f0ed;
}
main.all-box .color-block .color-block-btn {
  position: absolute;
  left: 0 ;
  top: 0 ;
  width: 100% ;
  height: 100% ;
  background: transparent ;
  outline: none ;
  border: none ;
  cursor: pointer ;
}
main.all-box .color-block .color-display-val {
  font-family: "myCodeFont";
  position: absolute ;
  z-index: -9999;
  font-size: 0px ;
}
main.all-box .color-block::before {
  content: "-GET-";
  font-family: "myCodeFont";
  position: relative ;
  width: auto ;
  height: auto ;
  border: 1px solid #ecf0f1;
  border-radius: 6px ;
  font-size: 20px ;
  font-weight: 700 ;
  letter-spacing: 1.3px ;
  color: white ;
  padding: 10px ;
  padding-left: 20px ;
  padding-right: 20px ;
  transition: 0.2s ;
  opacity: 0 ;
}
main.all-box .color-block:hover::before {
  opacity: 1 ;
}
.canvas-1,
.canvas-2 {
  position: fixed ;
  transition: 0.4s ;
  opacity: 0 ;
}
.canvas-1 {
  background: white ;
  top: 50% ;
  right: 50% ;
  z-index: -10;
  width: 0% ;
  height: 0% ;
  outline: white solid 4000px;
}
.canvas-2 {
  background: black ;
  bottom: 50% ;
  right: 50% ;
  z-index: -10;
  width: 0% ;
  height: 0% ;
  outline: black solid 4000px;
}
.bottom-show-10 {
  z-index: -10 !important;
}
.top-white-10 {
  outline: white solid 4000px !important ;
  z-index: 10 !important ;
  opacity: 1 !important ;
}
.top-black-10 {
  outline: black solid 4000px !important ;
  z-index: 10 !important ;
  opacity: 1 !important ;
}
.top-show-100 {
  z-index: 100 !important ;
  opacity: 1 !important ;
}
